<template>
    <div class="model_box" v-if="isvidels" @click="isvidel_f()">
    <div 
      class="model_box_back" 
      :class="{ 'number-change': numberChanged }"
      @click.stop="isvidel_ty()"
    >
      {{reward_list_z.number}}
    </div>
  </div>
</template>

<script setup>
import {defineProps,ref,watch} from 'vue';



const props = defineProps({
    isvidel:{
        type:Boolean,
        default:false
    },
    // 中奖数组
    reward_list_z:{
        type:Array,
    }
})
watch(props,()=>{
    isvidels.value = true;
})
const isvidels = ref(props.isvidel)

function isvidel_f(){
    isvidels.value = !isvidels.value
}

function isvidel_ty(){
    
}
// 监听数字变化
watch(() => props.reward_list_z.number, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    numberChanged.value = true;
    setTimeout(() => {
      numberChanged.value = false;
    }, 500);
  }
});

const numberChanged = ref(false);
</script>

<style lang="scss" scoped>
%center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.model_box {
  z-index: 999;
  position: fixed;
  inset: 0;
  @extend %center;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(23, 31, 52, 0.95));
  backdrop-filter: blur(12px);
  animation: fadeIn 0.4s ease;

  .model_box_back {
    width: 85%;
    max-width: 320px;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 50%;
    padding: 24px;
    box-sizing: border-box;
    @extend %center;
    font-size: 64px;
    font-weight: 700;
    color: #3730a3;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 2px 4px rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.1),
        rgba(99, 102, 241, 0.05));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
      );
      transform: rotate(45deg);
      animation: shine 2s infinite;
    }

    &:hover {
      transform: scale(1.02);
      
      &::before {
        opacity: 1;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shine {
  from {
    transform: translateX(-100%) rotate(45deg);
  }
  to {
    transform: translateX(100%) rotate(45deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

// 添加数字变化动画
.model_box_back {
  &.number-change {
    animation: pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
</style>